<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="Author" content="bankeys-ZBH"/>
    <meta name="Copyright" content="bankeys "/>
    <meta name="description" content="老板记账"/>
    <title>Accounting demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="swiper.css">

    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script src="echarts.js"></script>
    <link rel="stylesheet" href="css/index.css">

    <style>
        html, body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .titleTop {
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>

<!--<div class="titleTop" style="height: 20%;background: #00af00"></div>-->
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide page" id="page1" data-hash="slide1">
            <div class="contentText titlePos">
                <h4 class="title">店铺:收付宝高碑店总店</h4>
                <span class="label">收支预览</span>
            </div>
            <div class="mainPosBar" id="main"></div>

            <table class="statement tablePos" width="100%" border="0">
                <tr class="barBorder">
                    <td id="expenditure"><!-- 总支总计<br/>3012.0 --></td>
                    <td id="income"><!-- 收入总计<br/>3233.0 --></td>
                    <td>余额<br/><span class="balanceTextColor"><!-- 221.0 --></span></td>
                </tr>

            </table>
        </div>
        <div class="swiper-slide page" id="page2" data-hash="slide2">
            <div class="contentText titlePos">
                <h4 class="title">店铺:收付宝高碑店总店</h4>
                <span class="label">支出类别对比</span>
            </div>
            <div class="mainPosPie" id="main2"></div>

            <div id="box" style="height:161px;overflow:scroll;left: 0px;width: 100%;position: absolute;bottom: 0px;">
                <table id="statement" class="statement" width="100%" border="0">
                    <!--     <tr class="tableHeader">
                       <td>类别</td>
                       <td>金额</td>
                       <td>比例</td>
                       </tr>
                       <tr>
                       <td>餐饮</td>
                       <td>325</td>
                       <td>12.74%</td>
                       </tr>
                       <tr>
                       <td>进货</td>
                       <td>310</td>
                       <td>12.15%</td>
                       </tr>
                       <tr>
                       <td>吃饭</td>
                       <td>234</td>
                       <td>9.17%</td>
                       </tr>
                       <tr>
                       <td>唱歌</td>
                       <td>135</td>
                       <td>5.29%</td>
                       </tr>
                       <tr>
                       <td>喝酒</td>
                       <td>1548</td>
                       <td>60.66%</td>
                       </tr> -->
                </table>
            </div>

        </div>
        <div class="swiper-slide page" data-hash="slide3" id="page3">
            <div class="contentText titlePos">
                <h4 class="title">店铺:收付宝高碑店总店</h4>
                <span class="label">收入类别对比</span>
            </div>
            <div class="mainPosPie" id="main3"></div>
            <div style="height:161px;overflow:scroll;left: 0px;width: 100%;position: absolute;bottom: 0px;">
                <table id="statement3" class="statement" width="100%" border="0">

                </table>
            </div>
        </div>
        <!--<div class="swiper-slide" data-hash="slide4"></div>
        <div class="swiper-slide" data-hash="slide5"></div>-->

    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination" style="height: 30px;line-height: 30px;bottom: 0px;background: #bcbcbc;"></div>
    <!-- Add Arrows -->
    <!--<div class="swiper-button-next"></div>-->
    <!--<div class="swiper-button-prev"></div>-->
</div>


<script type="text/javascript" src="js/index.js"></script>

<!-- Swiper JS -->
<script src="swiper.js"></script>

<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        hashnav: true
    });
</script>
</body>
</html>